<template>
  <div>
    <el-form-item class="block-line cl" label="">
      <span class="label fl">字体</span>
      <el-select class="fl" placeholder="微软雅黑" v-model="styleObj.font.family">
        <el-option key="Microsoft YaHei" value="Microsoft YaHei" label="微软雅黑"></el-option>
        <el-option key="SimHei" value="SimHei" label="宋体"></el-option>
        <el-option key="SimSun" value="SimSun" label="黑体"></el-option>
        <el-option key="KaiTi" value="KaiTi" label="楷体"></el-option>
        <el-option key="STHeiti" value="STHeiti" label="花纹黑体"></el-option>
      </el-select>
      <el-select class="fl" placeholder="" v-model="styleObj.font.size">
        <el-option key="12px" value="12px" label="小"></el-option>
        <el-option key="14px" value="14px" label="中"></el-option>
        <el-option key="18px" value="18px" label="大"></el-option>
      </el-select>
      <el-checkbox-button class="fl" v-model="styleObj.font.weight">粗体</el-checkbox-button>
      <el-color-picker class="fl mr0" v-model="styleObj.font.color"></el-color-picker>
    </el-form-item>
    <el-form-item class="block-line cl" label="">
      <span class="label fl">间距</span>
      <el-select class="fl" placeholder="" v-model="styleObj.lineHeight">
        <el-option key="小" value="小" label="小"></el-option>
        <el-option key="中" value="中" label="中"></el-option>
        <el-option key="大" value="大" label="大"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item class="block-line cl" label="">
      <span class="label fl">按钮位置</span>
      <el-radio-group v-model="styleObj.layout">
        <el-radio :label="1">左</el-radio>
        <el-radio :label="2">中</el-radio>
        <el-radio :label="3">右</el-radio>
      </el-radio-group>
    </el-form-item>
  </div>
</template>
<script>
  import {mapState} from 'vuex'
  export default {
    data () {
      return {}
    },
    mounted () {},
    props: ['styleObj'],
    computed: {
      ...mapState({
        // formHtmlMap: state => state.contentManage.formHtmlMap
      })
    },
    methods: {
    }
  }
</script>
<style lang="scss">
  .form-style {
    .label{width: 120px;display: inline-block;}
    .fl{margin-right: 5px;}
    .mr0{margin-right: 0;}
    .block-line{margin: 5px 0 15px;}
    .el-select{
      width: 100px;
    }
    .el-checkbox-button{
      .el-checkbox-button__inner{
        border: 1px solid rgb(191, 203, 217);
        border-radius: 4px;
        padding: 10px 5px;
        top: -1px;
        box-shadow: none;
      }
    }
  }
</style>
